﻿jQuery(document).ready(function () {

    "use strict";

    function showTooltip(x, y, contents) {
        jQuery('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5
        }).appendTo("body").fadeIn(200);
    }

    /*****SIMPLE CHART*****/

    var flash = [[0, 2], [1, 6], [2, 3], [3, 8], [4, 5], [5, 13], [6, 8]];
    var html5 = [[0, 5], [1, 4], [2, 4], [3, 1], [4, 9], [5, 10], [6, 13]];

    var plot = jQuery.plot(jQuery("#basicflot"),
        [{
            data: flash,
            label: "Flash",
            color: "#1CAF9A"
        },
            {
                data: html5,
                label: "HTML5",
                color: "#428BCA"
            }
        ],
        {
            series: {
                lines: {
                    show: true,
                    fill: true,
                    lineWidth: 1,
                    fillColor: {
                        colors: [{opacity: 0.5},
                            {opacity: 0.5}
                        ]
                    }
                },
                points: {
                    show: true
                },
                shadowSize: 0
            },
            legend: {
                position: 'nw'
            },
            grid: {
                hoverable: true,
                clickable: true,
                borderColor: '#ddd',
                borderWidth: 1,
                labelMargin: 10,
                backgroundColor: '#fff'
            },
            yaxis: {
                min: 0,
                max: 15,
                color: '#eee'
            },
            xaxis: {
                color: '#eee'
            }
        });

    var previousPoint = null;
    jQuery("#basicflot").bind("plothover", function (event, pos, item) {
        jQuery("#x").text(pos.x.toFixed(2));
        jQuery("#y").text(pos.y.toFixed(2));

        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                jQuery("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY,
                    item.series.label + " of " + x + " = " + y);
            }

        } else {
            jQuery("#tooltip").remove();
            previousPoint = null;
        }

    });

    jQuery("#basicflot").bind("plotclick", function (event, pos, item) {
        if (item) {
            plot.highlight(item.series, item.datapoint);
        }
    });


    /***** USING OTHER SYMBOLS *****/

    var firefox = [[0, 5], [1, 8], [2, 6], [3, 11], [4, 7], [5, 13], [6, 9], [7, 8], [8, 10], [9, 9], [10, 13]];
    var chrome = [[0, 3], [1, 6], [2, 4], [3, 9], [4, 5], [5, 11], [6, 7], [7, 6], [8, 8], [9, 7], [10, 11]];

    var plot2 = jQuery.plot(jQuery("#basicflot2"),
        [{
            data: firefox,
            label: "Firefox",
            color: "#D9534F",
            points: {
                symbol: "square"
            }
        },
            {
                data: chrome,
                label: "Chrome",
                color: "#428BCA",
                lines: {
                    fill: true
                },
                points: {
                    symbol: 'diamond',
                    lineWidth: 2
                }
            }
        ],
        {
            series: {
                lines: {
                    show: true,
                    lineWidth: 2
                },
                points: {
                    show: true
                },
                shadowSize: 0
            },
            legend: {
                position: 'nw'
            },
            grid: {
                hoverable: true,
                clickable: true,
                borderColor: '#ddd',
                borderWidth: 1,
                labelMargin: 10,
                backgroundColor: '#fff'
            },
            yaxis: {
                min: 0,
                max: 15,
                color: '#eee'
            },
            xaxis: {
                color: '#eee',
                max: 10
            }
        });

    var previousPoint2 = null;
    jQuery("#basicflot2").bind("plothover", function (event, pos, item) {
        jQuery("#x").text(pos.x.toFixed(2));
        jQuery("#y").text(pos.y.toFixed(2));

        if (item) {
            if (previousPoint2 != item.dataIndex) {
                previousPoint2 = item.dataIndex;

                jQuery("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY,
                    item.series.label + " of " + x + " = " + y);
            }

        } else {
            jQuery("#tooltip").remove();
            previousPoint2 = null;
        }

    });

    jQuery("#basicflot2").bind("plotclick", function (event, pos, item) {
        if (item) {
            plot2.highlight(item.series, item.datapoint);
        }
    });


    /***** TRACKING WITH CROSSHAIR *****/

    var sin = [], cos = [];
    for (var i = 0; i < 14; i += 0.1) {
        sin.push([i, Math.sin(i)]);
        cos.push([i, Math.cos(i)]);
    }

    var plot3 = jQuery.plot("#trackingchart", [
        {data: sin, label: "sin(x) = -0.00", color: '#666'},
        {data: cos, label: "cos(x) = -0.00", color: '#999'}
    ], {
        series: {
            lines: {
                show: true,
                lineWidth: 2,
            },
            shadowSize: 0
        },
        legend: {
            show: false
        },
        crosshair: {
            mode: "xy",
            color: '#D9534F'
        },
        grid: {
            borderColor: '#ddd',
            borderWidth: 1,
            labelMargin: 10
        },
        yaxis: {
            color: '#eee'
        },
        xaxis: {
            color: '#eee'
        }
    });

    var legends = jQuery("#trackingchart .legendLabel");

    legends.each(function () {
        // fix the widths so they don't jump around
        jQuery(this).css('width', jQuery(this).width());
    });

    var updateLegendTimeout = null;
    var latestPosition = null;

    function updateLegend() {

        updateLegendTimeout = null;

        var pos = latestPosition;

        var axes = plot3.getAxes();
        if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
            pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
            return;
        }

        var i, j, dataset = plot3.getData();
        for (i = 0; i < dataset.length; ++i) {

            var series = dataset[i];

            // Find the nearest points, x-wise
            for (j = 0; j < series.data.length; ++j) {
                if (series.data[j][0] > pos.x) {
                    break;
                }
            }

            // Now Interpolate
            var y,
                p1 = series.data[j - 1],
                p2 = series.data[j];

            if (p1 == null) {
                y = p2[1];
            } else if (p2 == null) {
                y = p1[1];
            } else {
                y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
            }

            legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
        }
    }

    jQuery("#trackingchart").bind("plothover", function (event, pos, item) {
        latestPosition = pos;
        if (!updateLegendTimeout) {
            updateLegendTimeout = setTimeout(updateLegend, 50);
        }
    });


    /***** REAL TIME UPDATES *****/

    var data = [], totalPoints = 50;

    function getRandomData() {

        if (data.length > 0)
            data = data.slice(1);

        // Do a random walk
        while (data.length < totalPoints) {

            var prev = data.length > 0 ? data[data.length - 1] : 50,
                y = prev + Math.random() * 10 - 5;

            if (y < 0) {
                y = 0;
            } else if (y > 100) {
                y = 100;
            }
            data.push(y);
        }

        // Zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]])
        }
        return res;
    }


    // Set up the control widget
    var updateInterval = 1000;

    var plot4 = jQuery.plot("#realtimechart", [getRandomData()], {
        colors: ["#F0AD4E"],
        series: {
            lines: {
                fill: true,
                lineWidth: 0
            },
            shadowSize: 0	// Drawing is faster without shadows
        },
        grid: {
            borderColor: '#ddd',
            borderWidth: 1,
            labelMargin: 10
        },
        xaxis: {
            color: '#eee'
        },
        yaxis: {
            min: 0,
            max: 100,
            color: '#eee'
        }
    });

    function update() {

        plot4.setData([getRandomData()]);

        // Since the axes don't change, we don't need to call plot.setupGrid()
        plot4.draw();
        setTimeout(update, updateInterval);
    }

    update();


    /***** BAR CHART *****/

    var bardata = [["Jan", 10], ["Feb", 23], ["Mar", 18], ["Apr", 13], ["May", 17], ["Jun", 30], ["Jul", 26], ["Aug", 16], ["Sep", 17], ["Oct", 5], ["Nov", 8], ["Dec", 15]];

    jQuery.plot("#barchart", [bardata], {
        series: {
            lines: {
                lineWidth: 1
            },
            bars: {
                show: true,
                barWidth: 0.5,
                align: "center",
                lineWidth: 0,
                fillColor: "#428BCA"
            }
        },
        grid: {
            borderColor: '#ddd',
            borderWidth: 1,
            labelMargin: 10
        },
        xaxis: {
            mode: "categories",
            tickLength: 0
        }
    });


    /***** PIE CHART *****/

    var piedata = [
        {label: "Series 1", data: [[1, 10]], color: '#D9534F'},
        {label: "Series 2", data: [[1, 30]], color: '#1CAF9A'},
        {label: "Series 3", data: [[1, 90]], color: '#F0AD4E'},
        {label: "Series 4", data: [[1, 70]], color: '#428BCA'},
        {label: "Series 5", data: [[1, 80]], color: '#5BC0DE'}
    ];

    jQuery.plot('#piechart', piedata, {
        series: {
            pie: {
                show: true,
                radius: 1,
                label: {
                    show: true,
                    radius: 2 / 3,
                    formatter: labelFormatter,
                    threshold: 0.1
                }
            }
        },
        grid: {
            hoverable: true,
            clickable: true
        }
    });

    function labelFormatter(label, series) {
        return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
    }


    /***** MORRIS CHARTS *****/

    var m1 = new Morris.Line({
        // ID of the element in which to draw the chart.
        element: 'line-chart',
        // Chart data records -- each entry in this array corresponds to a point on
        // the chart.
        data: [
            {y: '2006', a: 30, b: 20},
            {y: '2007', a: 75, b: 65},
            {y: '2008', a: 50, b: 40},
            {y: '2009', a: 75, b: 65},
            {y: '2010', a: 50, b: 40},
            {y: '2011', a: 75, b: 65},
            {y: '2012', a: 100, b: 90}
        ],
        xkey: 'y',
        ykeys: ['a', 'b'],
        labels: ['Series A', 'Series B'],
        lineColors: ['#D9534F', '#428BCA'],
        lineWidth: '2px',
        hideHover: true
    });

    var m2 = new Morris.Area({
        // ID of the element in which to draw the chart.
        element: 'area-chart',
        // Chart data records -- each entry in this array corresponds to a point on
        // the chart.
        data: [
            {y: '2006', a: 30, b: 20},
            {y: '2007', a: 75, b: 65},
            {y: '2008', a: 50, b: 40},
            {y: '2009', a: 75, b: 65},
            {y: '2010', a: 50, b: 40},
            {y: '2011', a: 75, b: 65},
            {y: '2012', a: 100, b: 90}
        ],
        xkey: 'y',
        ykeys: ['a', 'b'],
        labels: ['Series A', 'Series B'],
        lineColors: ['#1CAF9A', '#F0AD4E'],
        lineWidth: '1px',
        fillOpacity: 0.8,
        smooth: false,
        hideHover: true
    });

    var m3 = new Morris.Bar({
        // ID of the element in which to draw the chart.
        element: 'bar-chart',
        // Chart data records -- each entry in this array corresponds to a point on
        // the chart.
        data: [
            {y: '2006', a: 30, b: 20},
            {y: '2007', a: 75, b: 65},
            {y: '2008', a: 50, b: 40},
            {y: '2009', a: 75, b: 65},
            {y: '2010', a: 50, b: 40},
            {y: '2011', a: 75, b: 65},
            {y: '2012', a: 100, b: 90}
        ],
        xkey: 'y',
        ykeys: ['a', 'b'],
        labels: ['Series A', 'Series B'],
        lineWidth: '1px',
        fillOpacity: 0.8,
        smooth: false,
        hideHover: true
    });

    var m4 = new Morris.Bar({
        // ID of the element in which to draw the chart.
        element: 'stacked-chart',
        // Chart data records -- each entry in this array corresponds to a point on
        // the chart.
        data: [
            {y: '2006', a: 30, b: 20},
            {y: '2007', a: 75, b: 65},
            {y: '2008', a: 50, b: 40},
            {y: '2009', a: 75, b: 65},
            {y: '2010', a: 50, b: 40},
            {y: '2011', a: 75, b: 65},
            {y: '2012', a: 100, b: 90}
        ],
        xkey: 'y',
        ykeys: ['a', 'b'],
        labels: ['Series A', 'Series B'],
        barColors: ['#1CAF9A', '#428BCA'],
        lineWidth: '1px',
        fillOpacity: 0.8,
        smooth: false,
        stacked: true,
        hideHover: true
    });

    var m5 = new Morris.Donut({
        element: 'donut-chart',
        data: [
            {label: "Download Sales", value: 12},
            {label: "In-Store Sales", value: 30},
            {label: "Mail-Order Sales", value: 20}
        ]
    });

    var m6 = new Morris.Donut({
        element: 'donut-chart2',
        data: [
            {label: "Chrome", value: 30},
            {label: "Firefox", value: 20},
            {label: "Opera", value: 20},
            {label: "Safari", value: 20},
            {label: "Internet Explorer", value: 10}
        ],
        colors: ['#D9534F', '#1CAF9A', '#428BCA', '#5BC0DE', '#428BCA']
    });


    /***** SPARKLINE CHARTS *****/

    jQuery('#sparkline').sparkline([4, 3, 3, 1, 4, 3, 2, 2, 3], {
        type: 'bar',
        height: '30px',
        barColor: '#428BCA'
    });

    jQuery('#sparkline2').sparkline([4, 3, 3, 1, 4, 3, 2, 2, 3], {
        type: 'line',
        height: '33px',
        width: '50px',
        lineColor: false,
        fillColor: '#1CAF9A'
    });

    jQuery('#sparkline3').sparkline([4, 3, 3, 1, 4, 3, 2, 2, 3], {
        type: 'pie',
        height: '33px',
        sliceColors: ['#F0AD4E', '#428BCA', '#D9534F', '#1CAF9A', '#5BC0DE']
    });

    jQuery('#sparkline4').sparkline([4, 3, 3, 5, 4, 3, 2, 5, 3], {
        type: 'line',
        height: '33px',
        width: '50px',
        lineColor: '#5BC0DE',
        fillColor: false
    });

    jQuery('#sparkline4').sparkline([3, 6, 6, 2, 6, 5, 3, 2, 1], {
        type: 'line',
        height: '33px',
        width: '50px',
        lineColor: '#D9534F',
        fillColor: false,
        composite: true
    });

    var delay = (function () {
        var timer = 0;
        return function (callback, ms) {
            clearTimeout(timer);
            timer = setTimeout(callback, ms);
        };
    })();

    jQuery(window).resize(function () {
        delay(function () {
            m1.redraw();
            m2.redraw();
            m3.redraw();
            m4.redraw();
            m5.redraw();
            m6.redraw();
        }, 200);
    }).trigger('resize');


});
